<template>
	<el-dialog :title="dialogTitle" :visible.sync="visible" width="480px">
		<el-form :model="formData" :rules="formRules" v-loading="loading" v-bind="formConfig" :validate-on-rule-change="false">
			<el-form-item label="实验时间段" prop="timeRanges">
				<el-date-picker v-model="formData.timeRanges" v-bind="datePickConfig"></el-date-picker>
			</el-form-item>
			<el-form-item :label="nameLabel" prop="name">
				<template v-if="type === '1'">
					<el-select v-model="formData.filed2" :placeholder="`选择${nameLabel}`" @change="handleSelectName">
						<el-option v-for="(item, index) in principalData" :key="index" :label="item.userName" :value="item.id"></el-option>
					</el-select>
				</template>
				<template v-if="type === '2'">
					<el-select v-model="formData.name" :placeholder="`选择${nameLabel}`">
						<el-option v-for="(item, index) in stationDatas" :key="index" :label="item.name" :value="item.name"></el-option>
					</el-select>
				</template>
			</el-form-item>
			<el-form-item :label="quantityLabel" prop="quantity">
				<el-input-number v-model="formData.quantity" controls-position="right" :min="1"></el-input-number>
				<span class="unit">升</span>
			</el-form-item>
			<el-form-item label="领用人" prop="filed1">
				<el-input v-model="formData.filed1" placeholder="请输入领用人"></el-input>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="handleSubmitForm()" :loading="submitLoading">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
import { maintainDetail, addedMaintain, updateMaintain } from '@/api/business/tbSafeguard';
export default {
	props: {
		value: { type: Boolean, default: false },
		dataId: { type: String, default: '' },
		type: { type: String, default: '' }
	},
	data() {
		return {
			visible: this.value,
			loading: false,
			formData: {},
			formRules: {
				timeRanges: { required: true, message: '请选择实验时间段', trigger: 'change' },
				name: { required: true, message: '请选择', trigger: 'change' },
				quantity: { required: true, message: '请输入负责人', trigger: 'blur' },
				filed1: { required: true, message: '请输入液氦预约量', trigger: 'blur' }
			},
			formConfig: { ref: 'form', size: 'medium', labelWidth: '105px', class: 'maintain_form' },
			datePickConfig: {
				editable: false,
				type: 'daterange',
				rangeSeparator: '至',
				endPlaceholder: '结束日期',
				startPlaceholder: '开始日期',
				valueFormat: 'yyyy-MM-dd HH:mm:ss'
			},
			piUserData: [],
			topicListData: [],
			saveLoading: false,
			submitLoading: false
		};
	},
	computed: {
		...mapGetters(['siteConfig', 'principalData']),
		addOrEdit() {
			return !this.dataId;
		},
		dialogName() {
			if (this.type === '1') {
				return '液氦记录';
			} else if (this.type === '2') {
				return '液氮记录';
			}
		},
		dialogTitle() {
			return this.addOrEdit ? `添加${this.dialogName}` : `修改${this.dialogName}`;
		},
		stationRooms() {
			return this.siteConfig.filter((n) => n.type === '6');
		},
		stationDatas() {
			return this.stationRooms.filter((n) => n.pid === '0');
		},
		nameLabel() {
			if (this.type === '1') {
				return '实验PI';
			} else if (this.type === '2') {
				return '实验站';
			}
		},
		quantityLabel() {
			if (this.type === '1') {
				return '液氦消耗';
			} else if (this.type === '2') {
				return '液氮消耗';
			}
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible: {
			async handler(flag) {
				this.$emit('input', flag);
				if (!flag) return false;
				this.formRules.name.message = `请选择${this.nameLabel}`;
				this.loading = true;
				if (this.addOrEdit) {
					this.$nextTick(() => {
						this.$refs['form'].resetFields();
						this.formData = {};
					});
				} else {
					this.formData = await this.getDataDetail();
				}
				this.loading = false;
			},
			immediate: true
		}
	},
	methods: {
		//获取数据详情
		async getDataDetail() {
			let result = await maintainDetail(this.dataId).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				datas['timeRanges'] = [datas.startTime, datas.endTime];
				return Promise.resolve(datas);
			}
		},

		handleSelectName(id) {
			let info = this.principalData.find((n) => n.id === id);
			this.$set(this.formData, 'name', info.userName);
		},

		//提交
		handleSubmitForm() {
			this.$refs['form'].validate((valid) => {
				if (!valid) return false;
				this.submitLoading = true;
				this.submitFormRequest();
			});
		},

		formatFormParams() {
			let params = { ...this.formData };
			params['startTime'] = params.timeRanges[0];
			params['endTime'] = params.timeRanges[1];
			params['type'] = this.type;
			delete params.timeRanges;
			return params;
		},

		//提交表单请求
		async submitFormRequest() {
			let params = this.formatFormParams();
			let callFunction = eval(this.addOrEdit ? addedMaintain : updateMaintain);
			let result = await callFunction(params).then((res) => res.data);
			this.submitLoading = false;
			if (result.code === '0') {
				this.$showCustomMessage('success', `${this.addOrEdit ? '添加' : '修改'}数据成功`);
				this.visible = false;
				this.$emit('finish');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.maintain_form::v-deep {
	width: 100%;
	overflow: hidden;
	padding: 10px 10px 0;
	.el-form-item__label {
		font-size: 16px;
	}
	.el-form-item__content {
		display: flex;
		align-items: center;
		.unit {
			flex-shrink: 0;
			margin-left: 10px;
		}
	}
	.el-input {
		font-size: 16px;
	}
	.el-select {
		width: 100%;
	}
	.is-controls-right {
		width: 100%;
	}
	.el-range-input {
		font-size: 16px;
	}
	.el-autocomplete {
		width: 100%;
	}
}
</style>
